<template>
  <div class="notification-container">
    <TransitionGroup
      name="notification-list"
      tag="div"
    >
      <div
        v-for="notification in appStore.notifications"
        :key="notification.id"
        :class="[
          'notification-item',
          notificationTypeClass(notification.type),
        ]"
        role="alert"
      >
        <div class="flex items-center">
          <component
            :is="notificationIcon(notification.type)"
            class="w-5 h-5 mr-3 flex-shrink-0"
          />
          <span class="font-semibold flex-grow">{{ notification.message }}</span>
        </div>
        <button
          class="ml-4 p-1 rounded-full hover:bg-opacity-20 transition-colors"
          :class="notificationButtonClass(notification.type)"
          aria-label="Close notification"
          @click="appStore.removeNotification(notification.id)"
        >
          <XMarkIcon class="w-5 h-5" />
        </button>
      </div>
    </TransitionGroup>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useAppStore } from '@/stores/app'
import {
  CheckCircleIcon,
  ExclamationTriangleIcon,
  InformationCircleIcon,
  XCircleIcon,
  XMarkIcon,
} from '@heroicons/vue/24/outline'

const appStore = useAppStore()

const notificationTypeClass = computed(() => (type) => {
  switch (type) {
    case 'success':
      return 'bg-green-100 border-green-400 text-green-700'
    case 'error':
      return 'bg-red-100 border-red-400 text-red-700'
    case 'warning':
      return 'bg-yellow-100 border-yellow-400 text-yellow-700'
    case 'info':
    default:
      return 'bg-blue-100 border-blue-400 text-blue-700'
  }
})

const notificationIcon = computed(() => (type) => {
  switch (type) {
    case 'success':
      return CheckCircleIcon
    case 'error':
      return XCircleIcon
    case 'warning':
      return ExclamationTriangleIcon
    case 'info':
    default:
      return InformationCircleIcon
  }
})

const notificationButtonClass = computed(() => (type) => {
  switch (type) {
    case 'success':
      return 'text-green-500 hover:bg-green-200'
    case 'error':
      return 'text-red-500 hover:bg-red-200'
    case 'warning':
      return 'text-yellow-500 hover:bg-yellow-200'
    case 'info':
    default:
      return 'text-blue-500 hover:bg-blue-200'
  }
})
</script>

<style scoped>
.notification-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1000;
  width: 100%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.notification-item {
  @apply flex items-center justify-between p-4 rounded-lg shadow-md border;
  animation: fadein 0.3s ease-out;
}

/* Vue TransitionGroup 动画 */
.notification-list-enter-active,
.notification-list-leave-active {
  transition: all 0.5s ease;
}
.notification-list-enter-from,
.notification-list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
.notification-list-move {
  transition: transform 0.5s ease;
}

@keyframes fadein {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
  .notification-container {
    top: auto;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    max-width: calc(100% - 2rem);
  }
}
</style>
